@import "base";
#top-con{
    width:100%;
    height:30px;
    background: #f2f2f2;
    .top{
        width:1042px;
        height:30px;
        margin: 0 auto;
        .top-left{
            height:30px;
            line-height: 30px;
            float: left;
            li{
                height:30px;
                float:left;
                padding: 0 6px 0 0;
                img{
                    float:left;
                    padding:4px 4px 0 24px;
                    display: inline-block;
                }
                 span{
                    margin: 0 14px;
                }
            }
        }
        .top-right{
            height:30px;
            line-height: 30px;
            float:right;
            padding: 0 80px 0 0;
            li{
                float:left;
                padding: 0 0 0 20px;
                position: relative;
                a{
                    img{
                        display: inline-block;
                        padding-top:6px;
                    }
                }
            }
            li:nth-child(3){
                //position: absolute;
                .pop_up{
                    width:110px;
                    height:120px;
                    box-shadow: 0 2px 4px #999;
                    background: #fff;
                    position: absolute;
                    display: none;
                    top:30px;
                    left:0;
                    .pop_up_app{
                        width:100%;                        
                        img{
                            display: block;
                            width:80px;
                            height:80px;
                            margin: 0px auto;
                            vertical-align: middle;
                        }
                        p{
                            line-height: 30px;
                            text-align: center;
                        }
                    }
                }
                a:hover{

                    color: red;
                }               
            }
        }
        
    }
    
}
#header-con{
    width: 100%;
    height: 90px;
    .header{
        width:1042px;
        height:90px;
        margin: 0 auto;
    }
    h1{
        width:384px;
        height:90px;
        float: left;
        span{
            display: block;
            height: 90px;
            background: url(../images/index/base_z.png) -838px -300px no-repeat;
        }
    }
    span{
        display: block;
        height:90px;
        background: url(../images/index/base_z.png) -669px -80px no-repeat;
    }
}
#nav-con{
    width:100%;
    height:42px;
    background: #000000;
    .nav{
        width:1042px;
        height:42px;
        margin: 0 auto;
        ul{
            float: left;
            height:42px;
            line-height: 42px;
            li{
                float: left;
                a{
                    display: inline;
                    color: #FFFFFF;
                    padding: 0 25px;
                }
                a:hover{
                    color:red;
                }
            }
            li:nth-child(1){
                a{
                    padding-left: 20px; 
                    color:red;
                }              
            }
            li:nth-child(7){ 
                position: relative;              
                .crossIcon{
                    width: 32px;
                    height: 18px;
                    background: url(../images/index/silo-icon.png) no-repeat;
                    position: absolute;
                    top:0px;
                    right:0px;
                    z-index: 2;
                }
            }
        }
        .shopping_bag{
            float:right;
            height:42px;
            cursor:pointer;
            color:#fff;          
//          padding:0 15px 0 0;
//          position:absolute;
//          bottom:0;
//          right:0;           
//          z-index:10;
            ul{
                text-align:center;
                li{
                    color:#fff;
                    float:left;
                    margin-left:15px;
                    font-size:14px;
                    height:42px;
                    line-height:42px; 
                }
                .shoppingbox{
                    color:#a8a8a8;
                    font-size:12px;
                    width:23px;                    
                    line-height:45px;
                    background: url(../images/index/base_z.png) -1017px -220px no-repeat;
                }
                li:nth-child(3){
                    padding-right: 34px;
                }
            }
        }
    }  
}
#banner{
    width:100%;
    height:524px;
    margin: 0 auto;
    overflow: hidden; 
    img{
        width:100%;
        height:100%;
    }
}
#product{
    width:1042px;
    height:auto;
    margin: -100px auto 0;
    position: relative;
    background: #fff;
    .todaynew,.hotsale{
        width:100%;
        height:auto;
        h4{
            padding: 26px 0 10px 20px;
            font-weight: 600;
            font-size: 28px;
        }
        dl{
            width:320px;
            height:230px;
            padding: 0 0 24px 20px;
            float:left;
            dt{
                img{
                    width:100%;
                    height:192px;
                    border:1px solid #A8A8A8;
                }
            }
            dd{
                width:302px;
                height:36px;
                background: #A7A7A7;
                padding: 0 10px;
                line-height: 36px;
                span:nth-child(1){
                    display: block;                    
                    width:169px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis; 
                    float: left;                 
                }
                span:nth-child(2){
                    display: block;
                    float:right;
                    color:red;
                    b{
                        font-size: 18px;
                    }
                }
            }
        }
        p{
            margin-right: 20px;
            float:right;
            background: url(../images/index/icon_arrows_right_black.gif) right no-repeat;
            a{
                margin-right: 10px;
            }
            a:hover{
                color:red;
            }
        }
    }
    .women,.men,.beauty,.lifestyle,.kids,.overseas{
        @extend.hotsale;
        .women-menu{
                position: relative;
                float: left;
                width: 320px;
                height: 484px;
                overflow: hidden;
                margin: 0 0 20px 20px;
                text-align: center;
                background: url(../images/index/home_silo_banner.jpg) 0 0 no-repeat;
            .women-menu-block{
                    position: absolute;
                    left: 0;
                    top: 300px;
                    width: 320px;
                    h5{
                        height: 71px;
                        background:url(../images/index/home_silo_title.png)50% 0 no-repeat;
                        text-indent: -999em;
                    }
                    .women-menu-block-box{
                            width: 217px;
                            padding: 6px 0;
                            margin: 8px auto 0;
                            border-top: 1px solid #000;
                            border-bottom: 1px solid #000;
                            line-height: 20px;
                            cursor: pointer;
                            a{
                                display: inline-block;
                                padding: 0 3px;
                                font-size: 14px;
                            }
                            .women-menu-block-box-top{
                                padding: 4px 5px 7px;                               
                            }
                            a:hover{
                                color: red;
                            }
                    }
            }
 
        }
    }
    .men{
        .men-menu{
            background: url(../images/index/home_silo_banner.jpg) -320px 0 no-repeat;
            .men-menu-block{
                h5{
                    background:url(../images/index/home_silo_title.png)50% -75px no-repeat;
                }
            }
        }
    }
   .beauty{
         .beauty-menu{
            background: url(../images/index/home_silo_banner.jpg) -640px 0 no-repeat;
            .beauty-menu-block{
                h5{
                    background:url(../images/index/home_silo_title.png)50% -150px no-repeat;
                }
            }
        }
   }
   .lifestyle{
         .lifestyle-menu{
            background: url(../images/index/home_silo_banner.jpg) -960px 0 no-repeat;
            .lifestyle-menu-block{
                h5{
                    background:url(../images/index/home_silo_title.png)50% -225px no-repeat;
                }
            }
        }
   }
   .kids{
        .kids-menu{
            background: url(../images/index/home_silo_banner.jpg) -1280px 0 no-repeat;
            .kids-menu-block{
                h5{
                    background:url(../images/index/home_silo_title.png)50% -300px no-repeat;
                }
            }
        }
   }
   .overseas{
        .overseas-menu{
            background: url(../images/index/home_silo_banner.jpg) -1600px 0 no-repeat;
            .overseas-menu-block{
                h5{
                    background:url(../images/index/home_silo_title.png)50% -375px no-repeat;
                }
            }
        }
        dl{
            dd{
                span:nth-child(1){
                    width: 56px;
                    height: 18px;
                    line-height: 18px;
                    color: #fff;
                    padding-left: 3px;
                    background: url(../images/index/event_label.png) no-repeat;
                    float: left;
                    margin: 11px 3px 0 -10px;
                }
                span:nth-child(2){
                    display: block;                   
                    width:180px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis; 
                    float: left;  
                    color:#000000;
                }
                span:nth-child(3){
                    display: block;
                    float:right;
                    color:red;
                    b{
                        font-size: 18px;
                    }
                }
            }
        }
   }
}
#activiesList{
    width: 1000px;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    padding-bottom: 20px;
    h4{
        height:28px;
        line-hight:26px;
        font-size: 28px;
        padding-bottom: 20px;
        
    }
    .activitiesHeader{
        width: 1000px;
        height: 25px;
        overflow: hidden;
        font-size: 14px;
        position: relative;
        .div1{
            float: left;
            span{
                height: 16px;
                line-height: 16px;
                border-left: 1px solid #000;
                padding: 0 30px;
            }
            span:last-child{
                border-left: 1px solid #000;
                border-right:1px solid #000000;
            }

        }
         .div2{                
                float: right;
                height:27px;
                span{
                    font-size: 18px;
                    color:red;
                }
            }
        .theSlider{
            width: 90px;
            height: 4px;
            overflow: hidden;
            background-color: #000;
            position: absolute;
            bottom: 0;
            left: 0;             
        }
    }
    .activitiesContent{
        width: 1020px;
        height: auto;
        padding-top: 9px;
        .theActivities{
            width: 318px;
            height: 88px;
            overflow: hidden;
            float: left;
            margin-right: 20px;
            margin-bottom: 20px;
            border: 1px solid #e7e7e7;
            position: relative;
            background-color: #f2f2f2;
            .theMask{
                width: 318px;
                height: 88px;
                overflow: hidden;
                position: absolute;
                left: 0;
                top: 0;
                filter: alpha(opacity=70);
                -moz-opacity: .7;
                -khtml-opacity: .7;
                opacity: .7;
                z-index: 1;
                background-color: #000;
            }
            .theButton{
                width: 120px;
                height: 30px;
                overflow: hidden;
                position: absolute;
                left: 50%;
                margin-left: -60px;
                top: 30px;
                color: #fff;
                line-height: 30px;
                text-align: center;
                background-color: #db2726;
                z-index: 2;
            }
            .theActivitiesImg{
                width: 149px;
                height: 88px;
                overflow: hidden;
                position: absolute;
                left: 0;
                top: 0;
                background-color: #fff;
            }
            .theActivitiesExplain{
                width: 169px;
                height: 88px;
                overflow: hidden;
                float: right;
                position: relative;
                p{
                    padding: 10px 0 0 14px;
                    line-height: 16px;
                }
                p:nth-child(2){
                   color: red;
                    span{
                        font-size: 16px;
                    }
                }

            }
        }   
    }
}

#footer-con{
    width:100%;
    height:205px;
    background: #f2f2f2;
    .footer{
        width:1000px;
        padding: 30px 21px 0;
        margin: 0 auto;       
        .footer_advantage{
            ul{
                width:100%;
                height:60px;
                text-align: center;
                padding-bottom: 10px;
                margin: 0 auto;
                li{
                    a{
                        padding: 0 30px;
                        height:60px;
                        float:left;
                        border-right:1px solid #A8A8A8;
                         span{
                             display: block;
                             margin-top:43px;
                         }
                    }
                }
                li:nth-child(1){
                    a{
                         background: url(../images/index/base_z.png) -161px -140px no-repeat;                   
                    }
                    a:hover{
                        background: url(../images/index/base_z.png) -161px -258px no-repeat;
                    }
                }
                li:nth-child(2){
                    a{
                        background: url(../images/index/base_z.png) -562px -93px no-repeat; 
                    }
                    a:hover{
                        background: url(../images/index/base_z.png) -562px 18px no-repeat; 
                    }
                }
                li:nth-child(3){
                    a{
                        background: url(../images/index/base_z.png) -165px -376px no-repeat; 
                    }
                    a:hover{
                        background: url(../images/index/base_z.png) -316px -223px no-repeat; 
                    }
                }
                li:nth-child(4){
                    a{
                        background: url(../images/index/base_z.png) -452px 15px no-repeat; 
                    }
                    a:hover{
                        background: url(../images/index/base_z.png) -452px -97px no-repeat; 
                    }
                }
                li:nth-child(5){
                    a{
                        background: url(../images/index/base_z.png) -323px -335px no-repeat; 
                    }
                    a:hover{
                        background: url(../images/index/base_z.png) -323px -448px no-repeat; 
                    }
                }
                li:nth-child(6){
                    a{
                        background: url(../images/index/base_z.png) -320px -105px no-repeat; 
                        border-right:0;
                    }
                    a:hover{
                        background: url(../images/index/base_z.png) -320px 12px no-repeat; 
                    }
                }
            }
        }
        p{
            line-height: 30px;
            text-align: center;   
        }
        p:nth-child(1){
            padding: 15px;
        }
        .footer_license{
            height:40px; 
            width: 100%;
            .img1{
                display: block;
                width:35px;
                height:36px;
                margin: 0 auto;
            }            
        }
    }
}